<template>
  <div class="wrap">
    <template>
      <div class="collapse-panel">
        <div class="collapse-a">
          <div>
            <p><b>{{ $t('message.ControlPointSurfaceCmd.controlElement') }}</b></p>
          </div>
          <div :id="collapseId1" @click="foldClick1">
                    <span class="cursor-pointer" :class="[{'cursor-pointer': !disabled1}]">
                        <i :class="['fa', collapse1 ? 'fa-angle-up' : 'fa-angle-down']"/>
                    </span>
          </div>
        </div>
        <div v-show="!collapse1">
          <div class="d-flex align-items-center">
            <query-list
				            v-model="params.surface"
                    :description="$t('message.ControlPointSurfaceCmd.selectObject')"
                    :active="params.queryListActiveMap.surface"
                    @switchQuery="switchQuery('surface')"
                    @removeItem="removeAllSurface"
				            :tipMsg="$t('message.ControlPointSurfaceCmd.selectObject')">
	            <el-Tooltip>{{$t('message.ControlPointSurfaceCmd.selectObject')}}</el-Tooltip>
            </query-list>
          </div>
          <div class="d-flex align-items-center">
            <span class="object_margin"><b>{{ $t('message.ControlPointSurfaceCmd.operationObject') }}</b></span>
            <el-radio v-for="(item,index) in params.pointModes"
                      class="mt-2"
                      v-model="params.curPointMode"
                      :key="index"
                      :label="item.value"
                      @change="changePointType"
            >
              {{ item.text }}
            </el-radio>
          </div>
          <div v-show="params.curPointMode === 0">
            <query-list
				            v-model="params.points"
                    :description="$t('message.ControlPointSurfaceCmd.selectControlPoint')"
                    :active="params.queryListActiveMap.points"
                    @switchQuery="switchQuery('points')"
                    @removeItem="removeControlPoint"
				            :tipMsg="$t('message.ControlPointSurfaceCmd.selectControlPoint')">
            </query-list>
          </div>
          <div v-show="params.curPointMode === 1">
            <query-list
				            v-model="params.lines"
                    :description="$t('message.ControlPointSurfaceCmd.selectControlLine')"
                    :active="params.queryListActiveMap.lines"
                    @switchQuery="switchQuery('lines')"
                    @removeItem="removeControlLine"
                    :tipMsg="$t('message.ControlPointSurfaceCmd.selectControlLine')">
            </query-list>
          </div>
        </div>
      </div>
      <div class="collapse-panel">
        <div class="collapse-a">
          <div>
            <p><b>{{ $t('message.ControlPointSurfaceCmd.paramSetting') }}</b></p>
          </div>
          <div :id="collapseId2" @click="foldClick2">
                    <span class="cursor-pointer" :class="[{'cursor-pointer': !disabled2}]">
                        <i :class="['fa', collapse2 ? 'fa-angle-up' : 'fa-angle-down']"/>
                    </span>
          </div>
        </div>
        <div v-show="!collapse2">
          <div class="d-flex align-items-center">
            <span class="degree">{{ $t('message.ControlPointSurfaceCmd.degree') }}</span>
            <label class="el-form-item__label">{{$t('message.ControlPointSurfaceCmd.U')}}</label>
	          <el-input v-model="params.degreeU.variableValue"
                                   :label="$t('message.ControlPointSurfaceCmd.U')"
                                   :min="params.boundary.degreeU.min"
                                   :max="params.boundary.degreeU.max"
                                   type = "number"
                                   @change="changeDegreeU">
            </el-input>
            <label class="el-form-item__label">{{$t('message.ControlPointSurfaceCmd.V')}}</label>
            <el-input v-model="params.degreeV.variableValue"
                                   :label="$t('message.ControlPointSurfaceCmd.V')"
                                   :min="params.boundary.degreeV.min"
                                   :max="params.boundary.degreeV.max"
                                   type = "number"
                                   @change="changeDegreeV">
            </el-input>
          </div>
          <div class="d-flex align-items-center">
            <span class="span">{{ $t('message.ControlPointSurfaceCmd.span') }}</span>
            <label class="el-form-item__label">{{$t('message.ControlPointSurfaceCmd.U')}}</label>
	          <el-input v-model="params.spanU.variableValue"
                                   :label="$t('message.ControlPointSurfaceCmd.U')"
                                   :min="params.boundary.spanU.min"
                                   :max="params.boundary.spanU.max"
                                   type = "number"
                                   @change="changeSpanU">
            </el-input>
            <label class="el-form-item__label">{{$t('message.ControlPointSurfaceCmd.V')}}</label>
	          <el-input v-model="params.spanV.variableValue"
                                   :label="$t('message.ControlPointSurfaceCmd.V')"
                                   :min="params.boundary.spanV.min"
                                   :max="params.boundary.spanV.max"
                                   type = "number"
                                   @change="changeSpanV">
            </el-input>
          </div>
        </div>
      </div>
      <div class="collapse-panel">
        <div class="collapse-a">
          <div>
            <p><b>{{ $t('message.ControlPointSurfaceCmd.dragSetting') }}</b></p>
          </div>
          <div :id="collapseId3" @click="foldClick3">
                    <span class="cursor-pointer" :class="[{'cursor-pointer': !disabled3}]">
                        <i :class="['fa', collapse3 ? 'fa-angle-up' : 'fa-angle-down']"/>
                    </span>
          </div>
        </div>
        <div v-show="!collapse3">
          <div class="d-flex align-items-center">
            <el-button class="gray-button" v-text="$t('message.ControlPointSurfaceCmd.undo')" @click="undoPreview"></el-button>
            <el-button class="gray-button" v-text="$t('message.ControlPointSurfaceCmd.redo')" @click="redoPreview"></el-button>
            <el-button class="gray-button"
                       v-text="$t('message.ControlPointSurfaceCmd.fullRestore')" @click="fullRestore"></el-button>
          </div>
        </div>
      </div>
      <div class="d-flex align-items-center">
        <el-checkbox v-model="params.adjustThreeAxisFlag"
                     @change="changeAdjustThreeAxisFlag"
                     :label="$t('message.ControlPointSurfaceCmd.adjustThreeAxis')"/>
      </div>
    </template>
    <template>
      <div class="dialog-footer pt-1 pb-2 pl-2 pr-2">
        <el-button id="buttonApply"
                   ref="applyButton"
                   type="primary"
                   class="dialog-footer__apply-button"
                   :disabled="allowConfirm"
                   @click="applyCmd"
                   @keyup.enter.native="applyCmd">
          {{ $t('message.PointCloud.apply') }}
        </el-button>
        <el-button id="buttonConfirm"
                   ref="confirmButton"
                   type="primary"
                   class="dialog-footer__confirm-button"
                   :disabled="allowConfirm"
                   @click="confirmCmd"
                   @keyup.enter.native="confirmCmd">
          {{ $t('message.PointCloud.confirm') }}
        </el-button>
        <el-button id="buttonClose"
                   ref="closeButton"
                   class="dialog-footer__close-button"
                   :disabled="false"
                   @click="closeCmd"
                   @keyup.enter.native="closeCmd">
          {{ $t('message.PointCloud.close') }}
        </el-button>
      </div>
    </template>
  </div>
</template>

<script>
import InputVariable from "../../../util/InputVariable";
import {ParamBoundary} from "../../../Command/pointCloud/ParamBoundary";
import {ElementType} from "../../../modeling/TypeDefine";
import ElementLibraryFilePreview from "../ElementLibrary/ElementLibraryFilePreview.vue";
import {controlPointSurfaceCommand} from "../../../Command/ControlPointSurfaceCommand";

export default {
  name: "CmdDlgPointCloudReconstruction",
  components: {ElementLibraryFilePreview},
  data() {
    return {
      disabled1: false,
      disabled2: false,
      disabled3: false,
      collapseId1: 'dialogCollapsed1',
      collapseId2: 'dialogCollapsed1',
      collapseId3: 'dialogCollapsed1',
      collapse1: false,
      collapse2: false,
      collapse3: false,
      previewError: true,
      optionApplyOrConfirm: 'Apply',
      params: {
        surface: [],
        points: [],
        lines: [],
        pointEle: [],
        transformMatrix: [], // 所有控制点变换矩阵
        degreeUArray: [], // 阶数
        degreeVArray: [],
        spanUArray: [], // 跨距数
        spanVArray: [],
        oldDegreeUArray: [], //旧次数U
        oldDegreeVArray: [],
        oldSpanUArray: [], //旧跨距数U
        oldSpanVArray: [],
        degreeU: new InputVariable(1),
        degreeV: new InputVariable(1),
        spanU: new InputVariable(1),
        spanV: new InputVariable(1),
        boundary: {
          degreeU: new ParamBoundary(1, true, 24, true), // 该功能增加对次数UV和跨距UV的最大值限制
          degreeV: new ParamBoundary(1, true, 24, true),
          spanU: new ParamBoundary(1, true, 160, true),
          spanV: new ParamBoundary(1, true, 160, true),
        },
        matrix: new THREE.Matrix4(), // handle变换矩阵
        queryListActiveMap: {
          surface: 1,
          points: 0,
          lines: 0,
        },
        curPointMode: 0,
        pointModes: [
          {
            text: this.$t('message.ControlPointSurfaceCmd.controlPoint'),
            value: 0,
          },
          {
            text: this.$t('message.ControlPointSurfaceCmd.controlLine'),
            value: 1,
          },
        ],
        adjustThreeAxisFlag: false,
        changeDegreeOrSpanFlag: 0,
        selectedIndex: -1,
        modifySelectedControlPointFlag: 0,
        handlePoint: [0.0, 0.0, 0.0],
        handelDirectionX: [1.0, 0.0, 0.0],
        handelDirectionY: [0.0, 1.0, 0.0],
        handelDirectionZ: [0.0, 0.0, 1.0],
        undoLength: 0,
        redoLength: 0,
        isDrag: 0,
      },
      clickFullRestoreFlag: false,
      isInit: false,
    }
  },
  created() {
    controlPointSurfaceCommand.init(500,250,800,async () => {
      this.changePluginContainerHeight(250);
      await this.init();
      await this.pickElementMode();
    });
  },
  beforeDestroy() {
    this.clearPreview();
    controlPointSurfaceCommand.closeActiveCmd();
  },
  methods: {
    async init() {
      controlPointSurfaceCommand.handleInit(res => {

      });
    },
    async pickElementMode() {
      controlPointSurfaceCommand.handlePickElement(res => {
        if(res?.element[0]?.element) {
          let pickResult = res?.element[0];
          let element = pickResult?.element;
          if(element?.type === ElementType.FACE && this.params.queryListActiveMap.surface) {
            this.pickFace(pickResult);
          } else if(element?.type === ElementType.POINT && this.params.queryListActiveMap.points) {
            this.pickPoints(pickResult);
          } else if(element?.type === ElementType.CURVE && this.params.queryListActiveMap.lines) {
            this.pickLines(pickResult);
          }
        }
      });
    },
    //拾取后参数初始化
    initParams(pickResult) {
      let element = pickResult?.element;
      if (!element) {
        return;
      }
      if(this.params.surface.length > 0) {
        this.params.surface = [];
      }
      this.params.surface.push(pickResult?.element);
    },
    async pickFace(pickResult) {
      let element = pickResult?.element;
      if (!element) {
        return;
      }

      // 重复拾取会取消拾取
      let index = this.params.surface.findIndex(item => item.id === element.id)
      if (index >= 0) {
        this.params.surface.splice(index, 1); // 删除这个面的同时，要把这个UV数组的值清空
        this.params.degreeUArray.splice(index, 1);
        this.params.degreeVArray.splice(index, 1);
        this.params.spanUArray.splice(index, 1);
        this.params.spanVArray.splice(index, 1);
        if (this.params.surface.length === 0) {
          this.params.points = [];
          this.params.lines = [];
        }
      } else {
        this.initParams(pickResult);
        this.params.degreeUArray.length === 1 ? this.params.degreeUArray[0] = 0 : this.params.degreeUArray.push(0);
        this.params.degreeVArray.length === 1 ? this.params.degreeVArray[0] = 0 : this.params.degreeVArray.push(0);
        this.params.spanUArray.length === 1 ? this.params.spanUArray[0] = 0 : this.params.spanUArray.push(0);
        this.params.spanVArray.length === 1 ? this.params.spanVArray[0] = 0 : this.params.spanVArray.push(0);
        this.params.oldDegreeUArray.length === 1 ? this.params.oldDegreeUArray[0] = 0 : this.params.oldDegreeUArray.push(0);
        this.params.oldDegreeVArray.length === 1 ? this.params.oldDegreeVArray[0] = 0 : this.params.oldDegreeVArray.push(0);
        this.params.oldSpanUArray.length === 1 ? this.params.oldSpanUArray[0] = 0 : this.params.oldSpanUArray.push(0);
        this.params.oldSpanVArray.length === 1 ? this.params.oldSpanVArray[0] = 0 : this.params.oldSpanVArray.push(0);
        this.isInit = true;
        await this.preview();
        this.params.curPointMode = 0;
        this.switchQuery('points');
      }
    },
    async pickPoints(pickResult) {
      let element = pickResult?.element;
      if (!element) {
        return;
      }
      if (element?.params?.subType !== 'grid') {
        return;
      }

      let index = this.params.points.findIndex(item => item.id === element.id);
      if (index >= 0) {
        this.params.points.splice(index, 1);
      } else {
        let elementName = element.name;
        let index1 = elementName.indexOf('点');
        if(index1 !== -1) {
          let name = elementName.slice(index1);
          element.name = name;
        } else {
          let index2 = elementName.indexOf('Point');
          if(index2 !== -1) {
            let name = elementName.slice(index2);
            element.name = name;
          }
        }
        this.params.points.push(element);
      }
      this.params.modifySelectedControlPointFlag = 1;
      this.clickFullRestoreFlag = false;
      await this.preview();
    },
    async pickLines(pickResult) {
      let element = pickResult?.element;
      if (!element) {
        return;
      }
      if (element?.params?.subType !== 'gridLine') {
        return;
      }
      let index = this.params.lines.findIndex(item => item.id === element.id);
      if (index >= 0) {
        this.params.lines.splice(index, 1);
      } else {
        let elementName = element.name;
        let index1 = elementName.indexOf('曲线');
        if(index1 !== -1) {
          let name = elementName.slice(index1);
          element.name = name;
        } else {
          let index2 = elementName.indexOf('Curve');
          if(index2 !== -1) {
            let name = elementName.slice(index2);
            element.name = name;
          }
        }
        this.params.lines.push(element);
      }

      let curveIds = [];
      this.params.lines.forEach(item => {
        curveIds.push(item.id);
      })
      let pointEle = await controlPointSurfaceCommand.getPointElementByCurveElementId(curveIds);
      if(pointEle) {
        this.params.pointEle = pointEle;
      }
      this.params.modifySelectedControlPointFlag = 1;
      this.clickFullRestoreFlag = false;
      await this.preview();
    },
    changeDegreeU(value) {
      if(value < this.params.boundary.degreeU.min) {
        this.params.degreeU.variableValue = this.params.boundary.degreeU.min;
      } else if(value > this.params.boundary.degreeU.max) {
        this.params.degreeU.variableValue = this.params.boundary.degreeU.max;
      }
      this.changeDegreeAndSpan();
    },
    changeDegreeV(value) {
      if(value < this.params.boundary.degreeV.min) {
        this.params.degreeV.variableValue = this.params.boundary.degreeV.min;
      } else if(value > this.params.boundary.degreeV.max) {
        this.params.degreeV.variableValue = this.params.boundary.degreeV.max;
      }
      this.changeDegreeAndSpan();
    },
    changeSpanU(value) {
      if(value < this.params.boundary.spanU.min) {
        this.params.spanU.variableValue = this.params.boundary.spanU.min;
      } else if(value > this.params.boundary.spanU.max) {
        this.params.spanU.variableValue = this.params.boundary.spanU.max;
      }
      this.changeDegreeAndSpan();
    },
    changeSpanV(value) {
      if(value < this.params.boundary.spanV.min) {
        this.params.spanV.variableValue = this.params.boundary.spanV.min;
      } else if(value > this.params.boundary.spanV.max) {
        this.params.spanV.variableValue = this.params.boundary.spanV.max;
      }
      this.changeDegreeAndSpan();
    },
    async changeDegreeAndSpan() {
      if (this.params.surface.length) {
        this.params.changeDegreeOrSpanFlag = 1;
      }
      this.params.points = [];
      this.params.lines = [];
      this.params.pointEle = [];
      this.params.isDrag = 0;
      this.modifyDegreeAndSpan();
      await this.preview();
    },
    async changePointType(value) {
      this.params.curPointMode = value;
      if (this.params.curPointMode) {
        this.switchQuery('lines');
        if (!this.params.points.length) {
          return;
        }
        this.params.points = [];
      } else {
        this.switchQuery('points');
        if (!this.params.lines.length) {
          return;
        }
        this.params.lines = [];
      }
      await this.preview();
    },
    changeAdjustThreeAxisFlag() {
      let params = {
        adjustThreeAxisFlag: this.params.adjustThreeAxisFlag
      }
      controlPointSurfaceCommand.changeAdjustThreeAxisFlag(params, res => {

      });
    },
    modifyDegreeAndSpan(index = 0) {
      if (this.params.degreeU && this.params.degreeV && this.params.spanU && this.params.spanV) {
        this.params.degreeUArray[index] = Math.round(this.params.degreeU.variableValue);
        this.params.degreeVArray[index] = Math.round(this.params.degreeV.variableValue);
        this.params.spanUArray[index] = Math.round(this.params.spanU.variableValue);
        this.params.spanVArray[index] = Math.round(this.params.spanV.variableValue);
      }
      this.params.modifySelectedControlPointFlag = 0;
      this.params.changeDegreeOrSpanFlag = 1;
    },
    //预览
    async preview() {
      if (!this.previewEnabled()) {
        return;
      }
      let config = this.getCommandParams(true);
      let params = {
        params: {
          surface: this.params.surface,
          points: this.params.points,
          lines: this.params.lines,
          pointEle: this.params.pointEle,
          curPointMode: this.params.curPointMode,
          uvArray: {
            degreeUArray: this.params.degreeUArray,
            degreeVArray: this.params.degreeVArray,
            spanUArray: this.params.spanUArray,
            spanVArray: this.params.spanVArray,
          },
          modifySelectedControlPointFlag: this.params.modifySelectedControlPointFlag,
          changeDegreeOrSpanFlag: this.params.changeDegreeOrSpanFlag,
          isInit: this.isInit
        }
      }
      if (this.isInit) {
        this.isInit = false;
      }
      let res = await controlPointSurfaceCommand.previewControlPointSurface(params);
      if (res) {
        this.params.degreeUArray = res?.degreeUArray;
        this.params.degreeVArray = res?.degreeVArray;
        this.params.spanUArray = res?.spanUArray;
        this.params.spanVArray = res?.spanVArray;
        this.params.degreeU = res?.degreeU;
        this.params.degreeV = res?.degreeV;
        this.params.spanU = res?.spanU;
        this.params.spanV = res?.spanV;
        this.previewError = res?.previewError;
      } else {
        this.previewError = true;
      }
    },
	  //参数重置
	  resetParams() {
      this.params.surface = [];
      this.params.points = [];
      this.params.lines = [];
      this.previewError = true;
      this.switchQuery('surface');
	  },
	  //预览判断
    previewEnabled() {
      return this.params.surface.length > 0 && !!(this.params.degreeU && this.params.degreeV && this.params.spanU && this.params.spanV);
    },
    //清除预览
    clearPreview() {
      controlPointSurfaceCommand.clearPreview();
      controlPointSurfaceCommand.clearPreViewControlPointSurface();
    },
	  //撤销预览
    undoPreview() {
      controlPointSurfaceCommand.controlPointSurfaceUndoPreview(res => {
        if(res) {
          this.previewError = res?.previewError;
          this.params.adjustThreeAxisFlag = false;
        }
      });
    },
    //重做预览
    redoPreview() {
      controlPointSurfaceCommand.controlPointSurfaceRedoPreview(res => {
        if(res) {
          this.previewError = res?.previewError;
          this.params.adjustThreeAxisFlag = false;
        }
      });
    },
    //完全恢复
    fullRestore() {
      controlPointSurfaceCommand.controlPointSurfaceFullRestore(res => {
        if(res) {
          this.params.points = [];
          this.params.lines = [];
          this.params.pointEle = [];
          this.params.handlePoint = [];
          this.params.handleDirectionX = [];
          this.params.handleDirectionY = [];
          this.params.handleDirectionZ = [];
          this.params.degreeU.variableValue = 1;
          this.params.degreeV.variableValue = 1;
          this.params.spanU.variableValue = 1;
          this.params.spanV.variableValue = 1;
          this.params.degreeUArray = [];
          this.params.degreeVArray = [];
          this.params.spanUArray = [];
          this.params.spanVArray = [];
          this.params.oldDegreeUArray = [];
          this.params.oldDegreeVArray = [];
          this.params.oldSpanUArray = [];
          this.params.oldSpanVArray = [];
          for (let i = 0; i < this.params.surface.length; i++) {
            this.params.degreeUArray.push(0);
            this.params.degreeVArray.push(0);
            this.params.spanUArray.push(0);
            this.params.spanVArray.push(0);
            this.params.oldDegreeUArray.push(0);
            this.params.oldDegreeVArray.push(0);
            this.params.oldSpanUArray.push(0);
            this.params.oldSpanVArray.push(0);
          }
          this.params.modifySelectedControlPointFlag = 0;
          this.params.isDrag = 0;
          this.params.changeDegreeOrSpanFlag = 0;
          this.params.adjustThreeAxisFlag = false;
          this.params.transformMatrix = [];
          this.clickFullRestoreFlag = true;
        }
      });
    },
    //应用
    applyCmd() {
      this.optionApplyOrConfirm = 'Apply';
      this.confirm();
    },
    //确定
    confirmCmd() {
      this.optionApplyOrConfirm = 'Confirm';
      this.confirm();
    },
    //确定和应用
    async confirm() {
      await this.preview();
      if (this.previewError) {
        return;
      }
      let config = this.getCommandParams(false);
      controlPointSurfaceCommand.createControlPointSurface({config}, res => {
        this.clearPreview();
        this.resetParams();
        if(this.optionApplyOrConfirm === 'Confirm') {
          controlPointSurfaceCommand.closeActiveCmd();
        }
      });
    },
    //获取发送命令的参数
    getCommandParams(isPreview = true) {
      let idName = 'id';
      if (!isPreview) {
        idName = 'topoId';
      }
      let surfaceId = [];
      this.params.surface.forEach(info => {
	      surfaceId.push(info.id);
      });
      let pointsId = [];
      if (!this.params.curPointMode) {
        pointsId = this.params.points.map(info => info.id);
      } else {
        pointsId = this.params.pointEle.map(info => info.id);
      }
      let controlPointMatrix = this.params.transformMatrix;
      let degreeUArray = this.params.degreeUArray;
      let degreeVArray = this.params.degreeVArray;
      let spanUArray = this.params.spanUArray;
      let spanVArray = this.params.spanVArray;
      let oldDegreeUArray = this.params.oldDegreeUArray;
      let oldDegreeVArray = this.params.oldDegreeVArray;
      let oldSpanUArray = this.params.oldSpanUArray;
      let oldSpanVArray = this.params.oldSpanVArray;
      let changeDegreeOrSpanFlag = this.params.changeDegreeOrSpanFlag;
      let modifySelectedControlPointFlag = this.params.modifySelectedControlPointFlag;
      let handlePoint = this.params.handlePoint;
      let handleDirectionX = this.params.handelDirectionX;
      let handleDirectionY = this.params.handelDirectionY;
      let handleDirectionZ = this.params.handelDirectionZ;

      return {
        ModifySelectedControlPointFlag: modifySelectedControlPointFlag,
        ChangeDegreeOrSpanFlag: changeDegreeOrSpanFlag,
        SurfaceId: surfaceId,
        PointsId: pointsId,
        DegreeUArray: degreeUArray,
        DegreeVArray: degreeVArray,
        SpanUArray: spanUArray,
        SpanVArray: spanVArray,
        OldDegreeUArray: oldDegreeUArray,
        OldDegreeVArray: oldDegreeVArray,
        OldSpanUArray: oldSpanUArray,
        OldSpanVArray: oldSpanVArray,
        HandlePoint: handlePoint,
        HandleDirectionX: handleDirectionX,
        HandleDirectionY: handleDirectionY,
        HandleDirectionZ: handleDirectionZ,
        Matrix: controlPointMatrix, // 控制点变换矩阵
      };
    },
    //激活的选取框
    switchQuery(name) {
      for (const key in this.params.queryListActiveMap) {
        if (key === name){
          this.params.queryListActiveMap[key] = 1;
        }else{
          this.params.queryListActiveMap[key] = 0;
        }
      }
    },
	  //移除面
    removeAllSurface(){
      controlPointSurfaceCommand.clearAllHighLight();
      // 清除网格线和控制点，重新发预览
      this.params.points = [];
      this.clearPreview();
      this.params.isDrag = 0;
    },
	  //移除控制点
    async removeControlPoint() {
      this.params.isDrag = 0;
      this.params.modifySelectedControlPointFlag = 1;
      await this.preview(); //重新预览
    },
	  //移除控制线
    async removeControlLine() {
      let curveIds = [];
      this.params.lines.forEach(item => {
        curveIds.push(item.id);
      })
      let pointEle = await controlPointSurfaceCommand.getPointElementByCurveElementId(curveIds);
      if(pointEle) {
        this.params.pointEle = pointEle;
      }
      this.params.isDrag = 0;
      this.params.modifySelectedControlPointFlag = 1;
      await this.preview(); //重新预览
	  },
    //关闭
    closeCmd() {
      this.clearPreview();
      controlPointSurfaceCommand.closeActiveCmd();
    },
    //控制折叠展开
    foldClick1() {
      if (this.disabled1) {
        return;
      }
      this.collapse1 = !this.collapse1;
    },
    foldClick2() {
      if (this.disabled2) {
        return;
      }
      this.collapse2 = !this.collapse2;
    },
    foldClick3() {
      if (this.disabled3) {
        return;
      }
      this.collapse3 = !this.collapse3;
    },
    changePluginContainerHeight(height) {
      controlPointSurfaceCommand.changePluginContainerHeight(
        {minWidth: this.$el.clientWidth, maxHeight: 135 + height})
    },
    changeContainerHeight() {
      let height = 0;
      if(this.collapse1) {
        height += 0;
      } else {
        if(this.params.surface.length < 1) {
          height += 70;
        } else {
          height += 70;
        }
        if(this.params.curPointMode === 0) {
          if(this.params.points.length < 1) {
            height += 70;
          } else {
            if(this.params.points.length <= 3) {
              height += 70 + 1 + (this.params.points.length - 1) * 30;
            } else {
              height += 70 + 3 + 2 * 30;
            }
          }
        } else if(this.params.curPointMode === 1) {
          if(this.params.lines.length < 1) {
            height += 70;
          } else {
            if(this.params.lines.length <= 3) {
              height += 70 + 1 + (this.params.lines.length - 1) * 30;
            } else {
              height += 70 + 3 + 2 * 30;
            }
          }
        }
      }
      if(this.collapse2) {
        height += 0;
      } else {
        height += 85;
      }
      if(this.collapse3) {
        height += 0;
      } else {
        height += 30;
      }
      this.changePluginContainerHeight(height);
    },
  },
  computed: {
    allowPreview() {

    },
    allowConfirm() {
      return this.previewError;
    },
    allowReset() {

    }
  },
  watch: {
    'params.surface': {
      handler(newVal, oldVal) {
        this.changeContainerHeight();
      },
    },
    'params.points': {
      handler(newVal, oldVal) {
        this.changeContainerHeight();
      },
    },
    'params.lines': {
      handler(newVal, oldVal) {
        this.changeContainerHeight();
      },
    },
    'collapse1': {
      handler(newVal, oldVal) {
        this.changeContainerHeight();
      },
    },
    'collapse2': {
      handler(newVal, oldVal) {
        this.changeContainerHeight();
      },
    },
    'collapse3': {
      handler(newVal, oldVal) {
        this.changeContainerHeight();
      },
    },
  }
}

</script>

<style scoped>

.wrap {
    font-size: 12px;
}

.dialog-row {
    display: flex;
}

.center {
    display: flex;
    justify-content: center;
}

.smoothRange {
    margin-top: 10px;
}

.smoothRange input[type=range] {
    -webkit-appearance: none;
    height: 6px;
    width: 90%;
    border: 0px;
    background: var(--bg-color8);
    outline: none;
}

.smoothRange input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 10px;
    background: var(--bg-color7);
    /*border-radius: 50% 50% 0 0;*/
    border: solid 1px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.smoothRange input[type=range]:hover {
    cursor: pointer;
}

.detail {
    width: 100%;
    font-size: 13px;
    height: 100px;
    background-color: #eae8e8;
    overflow-y: auto;
    padding: 5px;
}

.collapse-panel > .collapse-a {
    color: var(--text-color1);
    margin: 5px 0;
}

.collapse-a {
    display: flex;
    justify-content: space-between;
}

.detail {
    width: 100%;
    font-size: 13px;
    max-height: 10em;
    background-color: #eae8e8;
    overflow-y: auto;
    padding: 5px;
}

.el-button--calculate:focus,
.el-button--calculate:hover {
    background: #1777f5 !important;   /* 背景颜色*/
    color: #ffffff !important;        /* 字体颜色*/
    border-color: #9b9a9a !important; /* 边界颜色*/
}

.el-button--calculate.is-disabled,
.el-button--calculate.is-disabled:hover {
    background: #92c2f3 !important;   /* 背景颜色*/
    color: #ffffff !important;        /* 字体颜色*/
    border-color: #9b9a9a !important; /* 边界颜色*/
}

.el-button--calculate {
    background: #3c8cf5 !important;   /* 背景颜色*/
    color: #ffffff !important;        /* 字体颜色*/
    border-color: #9b9a9a !important; /* 边界颜色*/
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
}

.dialog-footer >>> .el-button {
    font-size: 12px;
}

.degree {
    white-space: nowrap;
    margin-right: 9px;
}

.span {
    white-space: nowrap;
}

.degree_margin {
    margin: 2em;
}

.span_margin {
    margin: 2em;
}

.object_margin {
    margin-right: 2em;
}

.gray-button {
    background-color: #c0c0c0;
    color: #000;
    border-color: #c0c0c0;
}

.gray-button {
    background-color: #d3d7db;
}

</style>
